<template>
  <div>
    <el-form :model="queryForm" ref="queryForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="查询编号">
        <el-input v-model="queryForm.userId" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="查询姓名" prop="checkPass">
        <el-input v-model="queryForm.userName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="配置状态" prop="age">
        <el-select v-model="queryForm.isConf" placeholder="请选择">
          <el-option
            label="未配置"
            value='false'>
          </el-option>
          <el-option
            label="已配置"
            value='true'>
          </el-option>
        </el-select>
      </el-form-item>
      <div class="button-box">
        <el-button type="success" round class="button1" @click="submitForm('queryForm')">查询</el-button>
      </div>

    </el-form>
    <!--table-->
    <el-dialog title="查询结果" :visible.sync="dialogTableVisible">
      <!--例子： 20条数据，一页显示5条数据,显示第2页，应该显示数组下标5到9的数据，也就是slice((2-1)*5,2*5)-->
      <el-table :data="showTable">
        <el-table-column property="userId" label="用户编号"></el-table-column>
        <el-table-column property="userName" label="用户姓名"></el-table-column>
        <el-table-column property="department" label="所属部门"></el-table-column>
        <el-table-column property="position" label="职务"></el-table-column>
        <el-table-column property="isConf" label="配置状态"></el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleDetail(scope.$index, scope.row)">详情
            </el-button>
            <el-button
              size="mini"
              @click="handleModify(scope.$index, scope.row)">{{scope.row.isConf==='true'?'配置修改':'角色配置'}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pager.c_page"
        :page-size="pager.pageSize"
        :total="userTable.length"
        layout="total, prev, pager, next"
      >
      </el-pagination>
      <el-button @click="handleExportExcel">导出excel</el-button>
      <!--<a href="/api/users/export">导出excel</a>-->
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: "um-queryList",
    data() {
      return {
        queryForm: {
          userId: '',
          userName: '',
          isConf: 'false'
        },
        dialogTableVisible: false,
        userTable: [],
        pager: {
          c_page: 1,
          pageSize: 5
        }

      }
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.post('/api/users/queryUser', {queryForm: this.queryForm}).then(res => {
              if (res.data.status === '1') {
                this.userTable = res.data.result;
                this.dialogTableVisible = true;
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleModify(index, row) {
        this.$router.push({name: 'um-modify', params: {row}});
      },
      handleDetail(index, row) {
        this.$router.push({name: 'um-detail', params: {row}});
      },
      handleCurrentChange(c_page) {
        this.pager.c_page = c_page;
      },
      handleExportExcel() {
        axios.post('/api/users/getExcel', {excelData: this.userTable}).then(res=>{
          if (res.data.status==='1'){
            this.$message({
              type: 'info',
              message: '导出成功！'
            })
            let a=document.createElement('a');
            a.href='/api/users/export';
            a.click();
          } else {
            this.$message({
              type: 'info',
              message: '导出失败！'
            })
          }
        })
      }
    },
    computed: {
      showTable() {
        var show = this.userTable.slice((this.pager.c_page - 1) * this.pager.pageSize, this.pager.c_page * this.pager.pageSize);
        return show;
      }
    }
  }
</script>

<style scoped>
  .el-select {
    width: 100%;
  }

  .button-box {
    margin: 20px auto;
    width: 50%;

  }

  .button1 {
    width: 100%;
  }
</style>
